<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div slot="header">
      <span>组织机构</span>
    </div>
    <!-- card body -->
    <el-tree ref="tree" :data="data" @node-click="handleNodeClick">
      <template #default="{ node }">
        <p>{{ node.label }}</p>
      </template>
    </el-tree>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {
          label: '总裁办',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        },
        {
          label: '总秘办',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        },
        {
          label: '财务部',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick (data) {
      console.log(data)
    }
  }
};
</script>

<style lang="less" scoped>
</style>